<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AgentCPM-GUI - 中文智能体可视化操作平台</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        .drop-cap:first-letter {
            font-size: 3.5em;
            line-height: 0.83;
            float: left;
            margin-right: 0.2em;
            font-weight: 700;
            color: #4f46e5;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 font-serif">AgentCPM-GUI</h1>
                    <h2 class="text-xl md:text-2xl font-medium mb-8 opacity-90">基于CPM-Bee大模型的中文智能体可视化操作平台</h2>
                    <p class="text-lg mb-8 leading-relaxed">为研究人员、开发者和AI爱好者提供友好界面，创建和管理能够自主完成复杂任务的AI智能体。</p>
                    <a href="https://github.com/OpenBMB/AgentCPM-GUI" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50 transition duration-150 ease-in-out">
                        <i class="fab fa-github mr-2"></i> GitHub 项目地址
                    </a>
                </div>
                <div class="lg:w-1/2">
                    <div class="bg-white/10 backdrop-blur-sm p-6 rounded-xl border border-white/20 shadow-lg">
                        <div class="mermaid">
                            graph TD
                            A[用户界面] -->|输入问题| B(智能体)
                            B --> C{决策}
                            C -->|需要搜索| D[网络搜索]
                            C -->|需要代码| E[代码执行]
                            C -->|需要数据| F[文件操作]
                            D --> G[整合结果]
                            E --> G
                            F --> G
                            G --> H[输出回答]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4 font-serif">核心功能概述</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Feature 1 -->
                <div class="bg-gray-50 p-8 rounded-xl transition-all duration-300 card-hover">
                    <div class="feature-icon bg-indigo-100 text-indigo-600">
                        <i class="fas fa-robot text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能体创建与管理</h3>
                    <p class="text-gray-600">通过直观界面创建基础对话、搜索增强、代码解释器等智能体，无需编写复杂代码即可配置AI能力。</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="bg-gray-50 p-8 rounded-xl transition-all duration-300 card-hover">
                    <div class="feature-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-tools text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">工具集成与调用</h3>
                    <p class="text-gray-600">预置网络搜索、代码执行、文件操作等工具，智能体可自主决策调用工具解决问题。</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="bg-gray-50 p-8 rounded-xl transition-all duration-300 card-hover">
                    <div class="feature-icon bg-purple-100 text-purple-600">
                        <i class="fas fa-comments text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多轮对话与推理</h3>
                    <p class="text-gray-600">展示智能体的思考过程、工具调用和最终回答，让AI决策过程透明可理解。</p>
                </div>
                
                <!-- Feature 4 -->
                <div class="bg-gray-50 p-8 rounded-xl transition-all duration-300 card-hover">
                    <div class="feature-icon bg-green-100 text-green-600">
                        <i class="fas fa-lock text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">本地部署与隐私保护</h3>
                    <p class="text-gray-600">基于开源模型构建，支持完全本地化部署，确保数据不出本地环境，保护隐私安全。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4 font-serif">使用场景</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div class="bg-white p-8 rounded-xl shadow-sm transition-all duration-300 card-hover">
                    <div class="flex items-center mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-flask text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">学术研究</h3>
                    </div>
                    <p class="text-gray-600 mb-4 drop-cap">研究人员可利用AgentCPM-GUI快速构建原型智能体，验证复杂AI系统的设计理念，而无需大量编码工作。你是否想过如何在几分钟内让AI帮你编写并执行Python代码来分析数据？</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm transition-all duration-300 card-hover">
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-chalkboard-teacher text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">教育应用</h3>
                    </div>
                    <p class="text-gray-600 mb-4 drop-cap">教育工作者可创建具有网络搜索能力的智能体，帮助学生获取最新信息并理解复杂概念，同时完全掌控数据安全与内容审核。为学生提供个性化的AI学习助手，无需担心隐私泄露问题。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4 font-serif">优势与特色</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-3 flex items-center">
                            <span class="bg-indigo-100 text-indigo-600 p-2 rounded-lg mr-3">
                                <i class="fas fa-star"></i>
                            </span>
                            中文优先设计
                        </h3>
                        <p class="text-gray-600 pl-12">相比其他智能体框架，AgentCPM-GUI最显著的特色是其中文优先设计和可视化操作界面。它降低了开发门槛，让非技术用户也能轻松创建功能强大的AI智能体。</p>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-3 flex items-center">
                            <span class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-3">
                                <i class="fas fa-shield-alt"></i>
                            </span>
                            国产开源模型
                        </h3>
                        <p class="text-gray-600 pl-12">系统基于国产开源大模型CPM-Bee构建，具有良好的中文理解能力和推理能力，并且完全可离线部署，避免了数据隐私风险和API成本问题。</p>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-bold mb-3 flex items-center">
                            <span class="bg-purple-100 text-purple-600 p-2 rounded-lg mr-3">
                                <i class="fas fa-bolt"></i>
                            </span>
                            高效任务执行
                        </h3>
                        <p class="text-gray-600 pl-12">通过强化学习微调增强推理能力，使智能体能够高效执行复杂的多步骤任务，大幅提升任务完成率和准确性。</p>
                    </div>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200">
                    <div class="mermaid">
                        pie title 智能体能力分布
                        "中文理解" : 35
                        "任务规划" : 25
                        "工具调用" : 20
                        "多轮对话" : 15
                        "代码执行" : 5
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-indigo-50">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4 font-serif">上手指南</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto"></div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="grid md:grid-cols-2">
                    <div class="p-8 md:p-12">
                        <h3 class="text-2xl font-bold mb-6 text-indigo-600">快速开始使用AgentCPM-GUI</h3>
                        
                        <div class="space-y-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">1</span>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium">下载项目代码</h4>
                                    <p class="text-gray-600 mt-1">从GitHub下载AgentCPM-GUI项目代码</p>
                                </div>
                            </div>
                            
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">2</span>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium">安装依赖</h4>
                                    <p class="text-gray-600 mt-1">按照文档说明安装必要依赖</p>
                                </div>
                            </div>
                            
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">3</span>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium">下载模型权重</h4>
                                    <p class="text-gray-600 mt-1">下载CPM-Bee模型权重(或配置其他支持的模型)</p>
                                </div>
                            </div>
                            
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">4</span>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium">启动服务</h4>
                                    <p class="text-gray-600 mt-1">启动后端服务和前端界面</p>
                                </div>
                            </div>
                            
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">5</span>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium">开始使用</h4>
                                    <p class="text-gray-600 mt-1">通过浏览器访问本地服务，开始创建和使用智能体</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-8 md:p-12 flex items-center">
                        <div class="w-full">
                            <h3 class="text-xl font-bold mb-4">技术要求</h3>
                            <div class="bg-white rounded-lg p-6 shadow-inner">
                                <ul class="space-y-3">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span>完全开源免费 (Apache 2.0许可证)</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span>无需支付API费用</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span>本地部署需要至少16GB RAM</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span>推荐配置NVIDIA GPU获得更佳体验</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span>基础使用不需要编程知识</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <a href="https://github.com/OpenBMB/AgentCPM-GUI" class="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition duration-150 ease-in-out">
                                <i class="fab fa-github mr-2"></i> 立即访问GitHub
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            pie: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>